<template>
  <el-container>
    <el-header class="title" style="height: 40px">
      万事达-TMS客户端
	    <el-button type="danger" plain size="mini">退出系统</el-button>
    </el-header>
    <el-main>
      <el-container>
        <el-header class="currTitle" style="height: 30px">
          回单管理-回单确认
        </el-header>
        <el-main>
          <el-row id="orderInfo">
            <el-col :span="6">订单号：XL1589965488965</el-col>
            <el-col :span="6">合同编号：DSK56655566</el-col>
            <el-col :span="6">运单号：XL1589965488965-a</el-col>
          </el-row>
          <hr>

          <!--步骤条-->
          <el-steps :active="5" align-center>
            <el-step title="新增订单" description="我是时间"></el-step>
            <el-step title="订单审核" description="我是时间"></el-step>
            <el-step title="订单报价" description="我是时间"></el-step>
            <el-step title="签署合同" description="我是时间"></el-step>
            <el-step title="提货发车" description="我是时间"></el-step>
            <el-step title="在途运输" description="我是时间"></el-step>
            <el-step title="卸货回单" description="我是时间"></el-step>
            <el-step title="订单结束" description="我是时间"></el-step>
          </el-steps>

          <!--委托人信息-->
          <el-row class="title">
            委托人信息
          </el-row>
          <el-table :data="tableData" border size="mini" fit tooltip-effect="dark" :header-cell-style="{background:'rgb(220,220,220)',color:'black'}"
            width="100%">
            <el-table-column prop="entrust" label="委托方" width="300" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="custom" label="委托人" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="联系电话" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="address" label="提货地址" width="300" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="contact" label="提货联系人" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="contactPhone" label="联系电话" width="100" show-overflow-tooltip>
            </el-table-column>
          </el-table>

          <!--收货人信息-->
          <el-row class="title">
            收货人信息
          </el-row>
          <el-table :data="tableData" border size="mini" fit tooltip-effect="dark" :header-cell-style="{background:'rgb(220,220,220)',color:'black'}"
            style="width: 100%">
            <el-table-column prop="entrust" label="收货方" width="300" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="custom" label="收货人" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="联系电话" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="address" label="收货地址" width="300" show-overflow-tooltip>
            </el-table-column>
          </el-table>

          <!--计划时间-->
          <el-row class="title">
            计划时间
          </el-row>
          <el-table :data="tableData" border size="mini" fit tooltip-effect="dark" :header-cell-style="{background:'rgb(220,220,220)',color:'black'}"
            style="width: 100%">
            <el-table-column prop="phone" label="计划装货时间" width="200" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="计划到货时间" width="200" show-overflow-tooltip>
            </el-table-column>
          </el-table>

          <!--货物信息-->
          <el-row class="title">
            货物信息
          </el-row>
          <el-table :data="tableData" border size="mini" fit tooltip-effect="dark" :header-cell-style="{background:'rgb(220,220,220)',color:'black'}"
            style="width: 100%">
            <el-table-column prop="phone" label="货名" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="规格型号" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="总包装" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="总数量" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="总重量kg" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="总体积 m³" width="100" show-overflow-tooltip>
            </el-table-column>
          </el-table>

          <!--回单照片-->
          <el-row class="title">
            回单照片
          </el-row>
          <div class="imgs">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-image :src="src">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </el-col>
              <el-col :span="4">
                <el-image :src="src">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </el-col>
              <el-col :span="4">
                <el-image :src="src">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </el-col>
              <el-col :span="4">
                <el-image :src="src">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </el-col>
            </el-row>
          </div>

          <!--实际货物信息-->
          <el-row class="title">
            实际货物信息
          </el-row>
          <el-table :data="tableData" border size="mini" fit tooltip-effect="dark" :header-cell-style="{background:'rgb(220,220,220)',color:'black'}"
            style="width: 100%">
            <el-table-column prop="phone" label="货名" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="规格型号" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="总包装" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="总数量" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="总重量kg" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="总体积 m³" width="100" show-overflow-tooltip>
            </el-table-column>
          </el-table>

          <!--回单备注-->
          <el-row class="title">
            回单备注
          </el-row>
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea">
          </el-input>

          <el-row style="padding: 20px">
            <el-button type="primary">确认</el-button>
            <el-button type="info">返回</el-button>
          </el-row>

        </el-main>
      </el-container>
    </el-main>
  </el-container>

</template>

<script>
export default {
  name: "ReturnConfirm",
  data() {
    return {
      tableData: [
        {
          entrust: "上海海棠科技有限公司",
          custom: "海棠",
          phone: "18966669859",
          address: "上海市长虹区11街12栋302",
          contact: "王强",
          contactPhone: "15966639996",
        },
      ],
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      textarea: "",
    };
  },
};
</script>

<style scoped lang="less">
* {
  text-align: left;
  margin: 0;
  padding: 0;
}
.el-header.title {
  background-color: rgb(153, 169, 191);
  color: #333;
  margin-bottom: 5px;
  font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
main.el-main {
  padding: 0;
}
.el-header.currTitle {
  background-color: rgb(211, 220, 230);
  line-height: 30px;
  margin-bottom: 5px;
  padding: 0;
}
#orderInfo {
  margin: 10px 0;
}
.el-steps {
  padding: 10px 0;
}
.el-table {
  display: table-cell;
}
.title {
  margin: 7px 0 2px;
}
.imgs {
  padding: 0 10px;
}
</style>
